<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./createElement.js"></script>
    <script src="./createDOMElement.js"></script>
    <script src="./patch.js"></script>
    <script>
      ;(() => {
        window. vnode = createElement('ul', { key: 'hehe' }, [
          createElement('li', { key: 'a' }, ['a']),
          createElement('li', { key: 'b' }, ['b']),
          createElement('li', { key: 'c' }, ['c']),
          createElement('li', { key: 'd' }, ['d'])
        ])

        createDOMElement(vnode)

        document.body.append(vnode.elm)

        // const vnode2 = createElement('ul', { key: 'hehe' }, [
        //   createElement('li', { key: 'e' }, ['e']),
        //   createElement('li', { key: 'd' }, ['d']),
        //   createElement('li', { key: 'a' }, ['a']),
        //   createElement('li', { key: 'g' }, ['g']),
        //   createElement('li', { key: 'c' }, ['c']),
        //   createElement('li', { key: 'b' }, ['b']),
        //   createElement('li', { key: 'f' }, ['f'])
        // ])

        // patch(vnode, vnode2)
      })()
    </script>
  </body>
</html>
